$follow-button-gray-disabled: lighten( $gray, 20% );

.follow-button,
button.follow-button {

	&:focus {
		box-shadow: none;
	}

	.gridicon__follow {
		opacity: 1;
		pointer-events: auto;
	}

	.gridicon__following {
		display: none;
		pointer-events: auto;
	}

	&::-moz-focus-inner {
		border: 0;
	}

	&:hover {
		color: $blue-medium;

		.gridicon__follow {
			fill: $blue-medium;
		}
	}

	@include breakpoint( "<660px" ) {
		padding: 7px 8px 9px 14px;
	}

	// Menu Items with Icons

	.gridicon {
		height: 18px;
		padding-right: 4px;
		top: 5px;
		width: 18px;
	}

	.gridicon__following {
		opacity: 0;
		pointer-events: none;
	}

	.gridicon__unfollow {

		.gridicon__follow {
			opacity: 0;
			pointer-events: none;
		}

		.gridicon__following {
			opacity: 1;
			pointer-events: auto;
		}
	}

	&.is-following {
		color: $alert-green;

		.gridicon {
			fill: $alert-green;
		}

		.gridicon__follow {
			display: none;
			pointer-events: none;
		}

		.gridicon__following {
			display: inline-block;
			opacity: 1;
			pointer-events: auto;
		}

		&:hover {
			color: $alert-green;

			.gridicon {
				fill: $alert-green;
			}
		}
	}

	&.is-disabled {
		color: $follow-button-gray-disabled;
		border-color: $follow-button-gray-disabled;
		pointer-events: none;

		@include no-select();

		.gridicon {
			fill: $follow-button-gray-disabled;
		}

		&:hover {
			color: $follow-button-gray-disabled;
			cursor: default;

			.gridicon {
				fill: $follow-button-gray-disabled;
			}
		}

		&:active {
			border-width: 1px 1px 2px;
		}
	}
}

.follow-button__label {
	@include breakpoint( "<660px" ) {
		display: none;
	}
}
